<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增商品')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-shangping-add">
        <div class="form-group" id="shangpinming">
            <label class="col-sm-3 control-label">商品名
                ：</label>
            <div class="col-sm-8">
                <input name="shangpinming" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group" id="shangpindengji">
            <label class="col-sm-3 control-label">商品等级
                ：</label>
            <div class="col-sm-8">
                <input name="shangpindengji" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group" id="shengchanchangshang">
            <label class="col-sm-3 control-label">生产厂家
                ：</label>
            <div class="col-sm-8">
                <input name="shengchanchangshang" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品类别
                ：</label>
            <div class="col-sm-8">
                <!--                <input name="shangpinleibie" class="form-control" type="text">-->
                <select name="shangpinleibie" class="form-control" onchange="checkleibie(this.value)">
                    <option value="防火门（左扇）">防火门（左扇）</option>
                    <option value="防火门（右扇）">防火门（右扇）</option>
                    <option value="防火门（整套门）">防火门（整套门）</option>
                    <option value="防火门（门框）">防火门（门框）</option>
                    <option value="防火门（门扇）">防火门（门扇）</option>
                    <option value="卷闸门">卷闸门</option>
                    <option value="防火锁">防火锁</option>
                    <option value="闭门器">闭门器</option>
                    <option value="拉爆盖">拉爆盖</option>
                </select>
            </div>
        </div>
        <div class="form-group" id="guigekuan">
            <label class="col-sm-3 control-label">规格宽
                ：</label>
            <div class="col-sm-8">
                <input name="shangpinguigekuan" onblur="changeselect(this.value)" class="form-control" type="text">
                <script>
                    function changeselect(value) {
                        document.getElementById("teshu1").hidden = Number(value) < 1000;
                        document.getElementById("teshu2").hidden = Number(value) < 1000;
                    }

                    function checkleibie(value) {
                        var shangpinming = document.getElementById("shangpinming")
                        var kuan = document.getElementById("guigekuan")
                        var gao = document.getElementById("guigegao")
                        var kaixaing = document.getElementById("kaixiang")
                        if (value === "防火锁" || value === "闭门器" || value === "拉爆盖") {
                            shangpinming.children[1].children[0].value = value
                            kuan.children[1].children[0].value = 0
                            gao.children[1].children[0].value = 0
                            kaixaing.children[1].children[0].value = null
                            shangpinming.hidden = value === "闭门器" || value === "拉爆盖";
                            kuan.hidden = true
                            gao.hidden = true
                            kaixaing.hidden = true
                        } else {
                            kuan.children[1].children[0].value = 0
                            gao.children[1].children[0].value = 0
                            kaixaing.children[1].children[0].value = "外左开"
                            shangpinming.hidden = false
                            kuan.hidden = false
                            gao.hidden = false
                            kaixaing.hidden = false
                        }
                        if (value === "卷闸门"){
                            kaixaing.children[1].children[0].value = null
                            kaixaing.hidden = true
                        }
                    }
                </script>
            </div>
        </div>
        <div class="form-group" id="guigegao">
            <label class="col-sm-3 control-label">规格高
                ：</label>
            <div class="col-sm-8">
                <input name="shangpinguigegao" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group" id="kaixiang">
            <label class="col-sm-3 control-label">开向
                ：</label>
            <div class="col-sm-8">
                <!--                <input name="shangpinkaixiang" class="form-control" type="text">-->
                <select name="shangpinkaixiang" class="form-control">
                    <option>外左开</option>
                    <option>外右开</option>
                    <option id="teshu1" hidden>外双开</option>
                    <option>内左开</option>
                    <option>内右开</option>
                    <option id="teshu2" hidden>内双开</option>
                    <option id="teshu3">卷闸门</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品进货价
                ：</label>
            <div class="col-sm-8">
                <input name="shangpinjinhuojia" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品售价
                ：</label>
            <div class="col-sm-8">
                <input name="shangpinshoujia" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品数量
                ：</label>
            <div class="col-sm-8">
                <input name="shuliang" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">商品图片
                ：</label>
            <div class="col-sm-8">
                <input type="hidden" name="shangpintupian">
                <div class="file-loading">
                    <input class="form-control file-upload" id="shangpintupian" name="file" type="file">
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "cangku/shangpin"
    $("#form-shangping-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-shangping-add').serialize());
        }
    }

    $(".file-upload").fileinput({
        uploadUrl: ctx + 'common/upload',
        maxFileCount: 1,
        autoReplace: true
    }).on('fileuploaded', function (event, data, previewId, index) {
        $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
    }).on('fileremoved', function (event, id, index) {
        $("input[name='" + event.currentTarget.id + "']").val('')
    })
</script>
</body>
</html>